<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import type {columnType} from "@/components/admin/f_list.vue";
import type{ aiRoleOrderType} from "@/api/ai_role_order_api";
import {reactive, ref} from "vue";
import {aiRoleOrderListApi} from "@/api/ai_role_order_api";
import {aiRoleOrderStatusOptions, aiRoleOrderTypeOptions} from "@/options";
import F_avatar_title from "@/components/common/f_avatar_title.vue";
import F_options from "@/components/common/f_options.vue";
import {aiRoleOrderUpdateApi} from "@/api/ai_role_order_api";
import {Message} from "@arco-design/web-vue";
import type{ aiRoleType} from "@/api/ai_role_api";


const columns: columnType[] = [
  {title: "ID", dataIndex: 'id'},
  {title: "申请用户", slotName: 'user'},
  {title: "关联角色", slotName: 'role'},
  {title: "类型", dataIndex: 'type', type: "options", options: aiRoleOrderTypeOptions},
  {title: "工单状态", dataIndex: 'status', type: "options", options: aiRoleOrderStatusOptions},
  {title: "申请理由", dataIndex: 'reason'},
  {title: "申请时间", dataIndex: 'createdAt', type: "date"},
  {title: "操作", slotName: 'action'},
]

const visible = ref(false)
const fListRef = ref()
const detail = reactive<aiRoleOrderType>({
  "id": 0,
  "createdAt": "2024-09-08T08:44:34.188Z",
  "reason": "这是一个好角色",
  "userID": 1,
  "aiRoleID": 4,
  "type": 1,
  "status": 1,
  "aiRoleUpdateData": undefined,
  "aiRoleTitle": "go开发助手1",
  "aiRoleAvatar": "/uploads/images/199b563d4911a804eb45e7262f787ce8.png",
  "userTitle": "lennon",
  "userAvatar": "/uploads/images/199b563d4911a804eb45e7262f787ce8.png",
})

function edit(record: aiRoleOrderType) {
  const data = record.aiRoleUpdateData ? JSON.parse(record.aiRoleUpdateData as unknown as string) : null;
  Object.assign(detail, record)
  detail.aiRoleUpdateData = data
  visible.value = true
}

async function updateOrderStatus(status: number) {
  const res = await aiRoleOrderUpdateApi({id: detail.id, status: status})
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
  visible.value = false
  fListRef.value.getList()
  return
}

function cancel() {
  visible.value = false
}


</script>

<template>
  <div>
    <a-modal v-model:visible="visible" title="工单审批">
      <a-form>
        <a-form-item label="申请人">{{ detail.userTitle }}</a-form-item>
        <a-form-item label="申请角色">{{ detail.aiRoleTitle }}</a-form-item>
        <a-form-item label="申请理由">{{ detail.reason }}</a-form-item>
        <a-form-item label="申请类型">
          <f_options :options="aiRoleOrderTypeOptions" :value="detail.type"></f_options>
        </a-form-item>
        <a-form-item label="角色更新信息" v-if="detail.type === 2">
          <div>
            <a-form-item label="角色标题" :label-col-props="{span: 6}" :wrapper-col-props="{span: 18}">{{ (detail.aiRoleUpdateData as aiRoleType).title }}</a-form-item>
            <a-form-item label="角色头像" :label-col-props="{span: 6}" :wrapper-col-props="{span: 18}"><a-avatar :image-url="(detail.aiRoleUpdateData as aiRoleType).avatar"></a-avatar></a-form-item>
            <a-form-item label="角色简介" :label-col-props="{span: 6}" :wrapper-col-props="{span: 18}">{{ (detail.aiRoleUpdateData as aiRoleType).abstract }}</a-form-item>
            <a-form-item label="角色分类" :label-col-props="{span: 6}" :wrapper-col-props="{span: 18}">{{ (detail.aiRoleUpdateData as aiRoleType).category }}</a-form-item>
            <a-form-item label="角色提示词" :label-col-props="{span: 6}" :wrapper-col-props="{span: 18}">{{ (detail.aiRoleUpdateData as aiRoleType).prompt }}</a-form-item>
          </div>

        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="cancel">取消</a-button>
        <a-button type="primary" status="danger" @click="updateOrderStatus(2)">拒绝</a-button>
        <a-button type="primary" status="success" @click="updateOrderStatus(3)">同意</a-button>
      </template>
    </a-modal>
    <f_list
        ref="fListRef"
        :url="aiRoleOrderListApi"
        no-add
        edit-label="工单审批"
        no-edit
        :columns="columns">
      <template #user="{record}: {record: aiRoleOrderType}">
        <f_avatar_title :title="record.userTitle " :avatar="record.userAvatar" :size="30"></f_avatar_title>
      </template>
      <template #action_edit="{record}: {record: aiRoleOrderType}">
        <a-button v-if="record.status === 1" type="primary" @click="edit(record)">工单审批</a-button>
      </template>
      <template #role="{record}: {record: aiRoleOrderType}">
        <f_avatar_title :title="record.aiRoleTitle " :avatar="record.aiRoleAvatar" :size="30"></f_avatar_title>
      </template>
    </f_list>
  </div>
</template>

<style lang="less">
.ai_role_avatar {
  width: 100%;

  .ai_role_avatar_list {
    border: 1px solid var(--color-neutral-3);
    border-radius: 5px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;

    .arco-radio-group {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 10px;
    }
  }

  .arco-upload {
    width: 100%;
  }

  .upload_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--color-neutral-3);
    margin-right: 10px;

    svg {
      color: var(--color-text-2);
    }
  }
}

</style>